<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{time}}</h1>
      <!-- <p title="{{time}}">{{msg}}</p> -->
      <p v-bind:title="time">{{msg}}</p>
      <a v-bind:href="url">百度</a>
      <img v-bind:src="imgSrc" alt="" />
    </div>
    <!-- 类似html的格式 叫做 模板 -->
    <!-- 
    文本插值 {{}}
    绑定html属性 v-bind:title 
    vue指令 v-xxx:
    -->

    <script>
      //   console.log(Vue);
      //   Vue 是一个函数 构造函数

      var app = new Vue({
        el: "#app", // 使用vue接管整个 app元素（包括子元素）
        data: {
          time: Date.now(),
          msg: "hello vue.js",
          url: "http://www.baidu.com",
          imgSrc: "https://cn.vuejs.org/images/dcloud2.png",
        }, // 这个应用app（Vue实例对象）的数据（状态）
      });

      console.log(app.msg);

      app.msg = "hello yyyy";
      //   现在数据和 DOM 已经被建立了关联，所有东西都是响应式的(状态)
      // data状态变化 自动=> view视图变化
      // 注意我们不再和 HTML 直接交互了。只关系状态

      //   app.imgSrc = "https://cn.vuejs.org/images/authing.svg";
      //   Property or method "time" is not defined 未定义初始状态
    </script>
  </body>
</html>
